<template>
  <div>
      <!-- 4个 -->
    <div class="Four">
      <div class="one">
        <span class="iconfont icon-youhuiquan"></span>
        <p class="youhuijuan">优惠券</p>
      </div>
      <div class="two">
        <span class="iconfont icon-jindoudou"></span>
        <p class="judou">聚豆换购</p>
      </div>
      <div class="three">
        <span class="iconfont icon-fuli"></span>
        <p class="fuli">生活福利</p>
      </div>
      <div class="four">
        <span class="iconfont icon-shangpin"></span>
        <p class="shangpin">所有商品</p>
      </div>
    </div>
    <!-- 两个图片 -->
    <div class="pIcture">
      <img src="26.jpg" alt="">
      <img src="27.jpg" alt="">
    </div>
    <!-- 诚意精选 -->
    <div class="chengyi">诚意精选</div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 4个布局 */
.Four {
  width: 100%;
  height: 0.8rem;
  /* background-color: cadetblue; */
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 00.2rem;
}
.one {
  width: 23%;
  height: 00.8rem;
  /* background-color: blueviolet; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.one span {
  width: 100%;
  height: 0.6rem;
  line-height: 00.6rem;
  text-align: center;
  font-size: 0.28rem;
  color: #ff584f;
}
.youhuijuan {
  display: inline;
  font-size: 0.16rem;
  text-align: center;
  height: 0.2rem;
  line-height: 0.2rem;
}
.two {
  width: 23%;
  height: 00.8rem;
  /* background-color: rgb(19, 75, 128); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.two span {
  width: 100%;
  height: 0.6rem;
  line-height: 00.6rem;
  text-align: center;
  font-size: 0.28rem;
  color: #faa514;
}
.judou {
  display: inline;
  font-size: 0.16rem;
  text-align: center;
  height: 0.2rem;
  line-height: 0.2rem;
}
.three {
  width: 23%;
  height: 00.8rem;
  /* background-color: rgb(233, 148, 69); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.three span {
  width: 100%;
  height: 0.6rem;
  line-height: 00.6rem;
  text-align: center;
  font-size: 0.28rem;
  color: #15bdfc;
}
.fuli {
  display: inline;
  font-size: 0.16rem;
  text-align: center;
  height: 0.2rem;
  line-height: 0.2rem;
}
.four {
  width: 23%;
  height: 00.8rem;
  /* background-color: rgb(16, 75, 204); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.four span {
  width: 100%;
  height: 0.6rem;
  line-height: 00.6rem;
  text-align: center;
  font-size: 0.28rem;
  color: #99e7a9;
}
.shangpin {
  display: inline;
  font-size: 0.16rem;
  text-align: center;
  height: 0.2rem;
  line-height: 0.2rem;
}
/* 两张图片 */
.pIcture{
  width: 100%;
  height: 1.2rem;
  display: flex;
  justify-content: space-between;
}
.pIcture img{
  width: 100%;
  height: 100%;
}
.chengyi{
  width: 100%;
  height: 00.3rem;
  font-size: .18rem;
  font-weight: 600;
  line-height: 000.3rem;
  /* background-color: #faa514; */
  margin-bottom: 0.10rem;
}
</style>